<!DOCTYPE html>
<html lang="kr">


<head>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

	<script type="text/javascript">
		$(function(){
			$('.uIdBtn').click(function(){
				$('[ng-controller="MyController"]').show();
			});
			$('.uIdCBtn').click(function(){
				$('[ng-controller="MyController"]').hide();
			});

		});
	</script>
</head>

<body ng-app="myapp">
	<a href="javascript:void(0)" class="uIdBtn">show</a>
	<a href="javascript:void(0)" class="uIdCBtn">close</a>
	<div ng-controller="MyController" style="display:none">
		<button ng-click="myData.doClick(item, $event)">Send AJAX Request</button>
		<br/>
		Data from server: {{myData.key}}
		<br/>
		Data from server: {{myData.foo}}
	</div>

	<script>
		angular.module("myapp", [])
				.controller("MyController", function($scope, $http) {
						$scope.myData = {};
						$scope.myData.doClick = function(item, event) {
							var responsePromise = $http.get("http://127.0.0.1:8087/tmpAngularJS/test/");
							responsePromise.success(function(data, status, headers, config) {
								$scope.myData.key = data.key;
								$scope.myData.foo = data.foo;
								console.log('succ');
								console.log(data);
								console.log(status);
								console.log(headers);
								console.log(config);
							});
							responsePromise.error(function(data, status, headers, config) {
								console.log('fail');
							});
						}


				} );
	</script>

</body>

</html>